<template>
  <el-dialog
    :title="eventType === 'audit' ? '审批通过' : '审批拒绝'"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="false"
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-form label-width="80px" ref="dataForm" :model="dataForm">
      <template v-if="eventType === 'audit'">
        <el-form-item
          :label="item.nodeName + item.label"
          :prop="'candidateList.' + i + '.value'"
          v-for="(item, i) in dataForm.candidateList"
          :key="i"
          :rules="item.rules"
        >
          <candidate-user-select
            v-model="item.value"
            multiple
            :placeholder="'请选择' + item.label"
            :taskId="taskId"
            :formData="formData"
            :nodeId="item.nodeId"
          />
        </el-form-item>
      </template>
      <el-form-item
        label="加签人员"
        v-if="eventType === 'audit' && properties && properties.hasFreeApprover"
      >
        <user-select
          v-model="freeApproverUserId"
          placeholder="请选择加签人员,不选即该节点审核结束"
        />
      </el-form-item>
      <el-form-item label="审批意见" prop="handleOpinion">
        <el-input
          v-model="dataForm.handleOpinion"
          placeholder="请输入审批意见（选填）"
          type="textarea"
          :rows="4"
        />
      </el-form-item>
      <el-form-item label="审批签名" v-if="properties && properties.hasSign">
        <div class="sign-main">
          <div class="sign-head">
            <div class="sign-tip">请在这里输入你的签名</div>
            <div class="sign-action">
              <el-button class="clear-btn" size="mini" @click="handleReset"
                >清空</el-button
              >
              <el-button
                class="sure-btn"
                size="mini"
                @click="handleGenerate"
                :disabled="!!signImg"
              >
                确定签名</el-button
              >
            </div>
          </div>
          <div class="sign-box">
            <vue-esign
              ref="esign"
              :height="330"
              v-if="!signImg"
              :lineWidth="5"
            />
            <img :src="signImg" alt="" v-if="signImg" class="sign-img" />
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="抄送人员"
        prop="copyIds"
        v-if="properties && properties.isCustomCopy"
      >
        <user-select v-model="copyIds" placeholder="请选择" multiple />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{
        $t("common.cancelButton")
      }}</el-button>
      <el-button type="primary" @click="handleApproval()" :loading="btnLoading">
        {{ $t("common.confirmButton") }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import vueEsign from "vue-esign";
import CandidateUserSelect from "./CandidateUserSelect";
export default {
  components: { CandidateUserSelect, vueEsign },
  data() {
    return {
      visible: false,
      dataForm: {
        candidateList: [],
        handleOpinion: "",
      },
      copyIds: [],
      freeApproverUserId: "",
      signImg: "",
      btnLoading: false,
      properties: {},
      eventType: "",
      taskId: "",
      formData: {
        flowId: "",
        data: "{}",
      },
    };
  },
  methods: {
    init(properties, taskId, eventType, candidateList, flowId) {
      this.visible = true;
      this.properties = properties;
      this.taskId = taskId;
      this.eventType = eventType || "";
      this.dataForm.candidateList = candidateList || [];
      this.dataForm.handleOpinion = "";
      this.formData.flowId = flowId;
      this.copyIds = [];
      this.signImg = "";
      this.freeApproverUserId = "";
      this.$nextTick(() => {
        this.handleReset();
        this.$refs["dataForm"].resetFields();
      });
    },
    handleApproval() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.properties.hasSign && !this.signImg) {
            this.$message({
              message: "请签名",
              type: "error",
            });
            return;
          }
          let query = {
            handleOpinion: this.dataForm.handleOpinion,
            signImg: this.signImg,
            copyIds: this.copyIds.join(","),
          };
          if (this.dataForm.candidateList.length) {
            let candidateList = {};
            for (let i = 0; i < this.dataForm.candidateList.length; i++) {
              candidateList[this.dataForm.candidateList[i].nodeId] =
                this.dataForm.candidateList[i].value;
            }
            query.candidateList = candidateList;
          }
          if (this.eventType === "audit" && this.properties.hasFreeApprover) {
            query = { freeApproverUserId: this.freeApproverUserId, ...query };
          }
          this.btnLoading = true;
          this.$emit("submit", query);
        }
      });
    },
    closeDialog() {
      this.btnLoading = false;
      this.visible = false;
    },
    handleReset() {
      this.signImg = "";
      this.$nextTick(() => {
        this.$refs.esign && this.$refs.esign.reset();
      });
    },
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          if (res) this.signImg = res;
        })
        .catch((err) => {
          this.$message({
            message: "请签名",
            type: "warning",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.sign-main {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  .sign-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    border-bottom: 1px solid #dcdfe6;
    .sign-tip {
      color: #a5a5a5;
      font-size: 12px;
    }
    .sign-action {
      display: flex;
      align-items: center;
      .clear-btn,
      .sure-btn {
        margin-left: 5px;
      }
    }
  }
  .sign-box {
    border-top: 0;
    height: 100px;
  }
  .sign-img {
    width: 100%;
  }
}
</style>
